<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2014/7/21
  Time: 22:09
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>${tutorialData.tutorial.title}---知道吗</title>
</head>
<body style="padding-top: 70px;">
<jsp:include page="/topNav"></jsp:include>

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2>${tutorialData.tutorial.title}</h2>

            <h5 style="color: #999999;">提交者:${tutorialData.tutorial.userName}&nbsp;&nbsp;&nbsp;&nbsp;<fmt:formatDate
                    value="${tutorialData.tutorial.createTime}"
                                                                                                        type="both"
                                                                                                        pattern="YYYY-MM-dd HH:mm:ss" /></h5>

            <div>${tutorialData.tutorial.content}</div>

            <c:choose>
                <c:when test="${user == null}">
                    <div style="margin-top: 50px;margin-bottom: 30px">
                        <p>请<a href="">登录</a>后对本教程进行评分</p>
                    </div>
                </c:when>
                <c:otherwise>
                    <div style="margin-top: 50px;margin-bottom: 30px">
                        <h5>请评分(同一篇文章您只能评分一次,请考虑好再评分)</h5>

                        <div id="raty"></div>
                        <span id="scoremsg" style="color: #ff0000"></span>
                    </div>
                </c:otherwise>
            </c:choose>
            <div style="margin-bottom: 50px;">
                <h4>评论</h4>
                <textarea rows="3" class="form-control" id="comment" name="comment" placeholder="评论内容2-30个字"
                          maxlength="30"
                          style="height: 150px;width: 70%;margin-bottom: 10px"></textarea>
                <button>写好了</button>
            </div>
         </div>
     </div>
</div>

</body>
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap/user_defined.css" rel="stylesheet" type="text/css" />
<link href="raty/jquery.raty.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="raty/jquery.raty.js"></script>
<c:choose>
    <c:when test="${user != null && tutorialData.ratingByUser}">
        <script type="text/javascript">
            $("#raty").raty({
                path: "img",
                readOnly: true,
                score: ${tutorialData.userScore.score},
                hints: ['1分:此教程极差', '2分:此教程不好', '3分:此教程一般', '4分:此教程很好', '5分:此教程非常优秀']
            });
            $("#scoremsg").html("您已经对此教程评过分了")
        </script>
    </c:when>
    <c:when test="${user != null && !tutorialData.ratingByUser && tutorialData.tutorial.userName == user.userName}">
        <script type="text/javascript">
            $("#raty").raty({
                path: "img",
                readOnly: true,
                hints: ['1分:此教程极差', '2分:此教程不好', '3分:此教程一般', '4分:此教程很好', '5分:此教程非常优秀']
            });
            $("#scoremsg").html("您不能对自己的教程进行评分")
        </script>
    </c:when>
    <c:when test="${user != null && !tutorialData.ratingByUser && tutorialData.tutorial.userName != user.userName}">
        <script type="text/javascript">
            $("#raty").raty({
                path: "img",
                //cancel: true,
                hints: ['1分:此教程极差', '2分:此教程不好', '3分:此教程一般', '4分:此教程很好', '5分:此教程非常优秀'],
                //cancelHint:"取消评分",
                target: "#scoremsg",
                click: function (score, evt) {
                    if (confirm("您给此教程的评分是" + score + "分,确定吗?")) {

                        $.ajax({
                            url: "/Origami/score",
                            type: "post",
                            data: {tutorialId: ${tutorialData.tutorial.id}, score: score,
                                scoreCount:${tutorialData.tutorial.scorecount}, totalScore:${tutorialData.tutorial.totalscore}},
                            dataType: "json",
                            async: false,
                            complete: function (data) {
                                if (data.responseText == 'success') {
                                    //alert("评分成功");
                                    $("#raty").raty({
                                        path: "img",
                                        readOnly: true,
                                        score: score
                                    })
                                    $("#scoremsg").html("您已经完成评分")
                                } else if (data.responseText == 'error') {
                                    alert("系统错误,请重新操作");
                                    return false;
                                }
                            }
                        })
                        return true;
                    } else {
                        return false;
                    }
                }
            });
        </script>
    </c:when>
</c:choose>
</html>
